<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
</style>
<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <!-- <i-col :span="spanLeft" class="layout-menu-left"> -->
                <!--<Menu :mode="modeType" theme="dark" width="auto" :active-name="this.$route.path" :open-names="openNames"-->
                <!--@on-select="menuSelect" accordion> -->
            <Menu theme="dark" width="auto" :active-name="this.$route.path" :open-names="openNames">
                <!-- <div class="layout-logo-left"> -->
                    <!--<Icon type="paper-airplane" :size="logoSize" v-show="logoIsDisplay"></Icon>-->
                    <!--<span class="layout-text"> 智慧营区</span>-->
                    <!--&lt;!&ndash;Icon&ndash;&gt;ivu-icon ivu-icon-arrow-return-right-->
                    <!--<Icon @click="jumpPage('','/')" type="arrow-return-right" style="color: wheat;font-size: 50px;"></Icon>-->
                    <!-- <img @click="jumpPage('','/')" src="../assets/image/home_back.png" alt="" style="width: 100%"> -->
                <!-- </div> -->
                <!--侧边菜单-->


                <!--测试-->
                <template v-for="(item) in $router.options.routes">
                    <Submenu :name="item.name" v-bind:key="item.Id" v-if="!item.hidden">
                        <template slot="title">
                            <Icon type="md-apps" size="16"></Icon>
                            <span class="layout-text">{{item.name}}</span>
                        </template>
                        <template v-for="(child) in item.children" >
                            <router-link :to="child.path" v-bind:key="child">
                                <Menu-item :name="child.path" v-if="!child.hidden">{{child.name}}</Menu-item>
                            </router-link>
                        </template>
                    </Submenu>
                </template>

                <!--正式-->
                <!--<template v-for="(item,index) in menuArr">-->

                <!--<Submenu :name="item.title" v-if="item.checked">-->
                <!--<template slot="title">-->
                <!--<Icon :type="item.imgurl" :size="iconSize"></Icon>-->
                <!--<span class="layout-text">{{item.title}}</span>-->
                <!--</template>-->
                <!--<template v-for="(child,childIndex) in item.children"-->
                <!--v-if="child.checked && child.children">-->
                <!--<router-link :to="child.url">-->
                <!--<Menu-item :name="child.url">{{child.title}}</Menu-item>-->
                <!--</router-link>-->

                <!--</template>-->
                <!--</Submenu>-->

                <!--</template>-->
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Content style="padding: 20px; background: '#fff">
                <Menu mode="horizontal" theme="light">
                    <MenuItem name="backToMain">
                        <Icon type="ios-desktop"></Icon>
                        <span @click="jumpPage('','/')">显示大屏</span>
                    </MenuItem>
                    <MenuItem name="userMgr">
                        <Icon type="ios-people" />
                        <span @click="jumpPage('','/')">用户管理</span>
                    </MenuItem>
                    <MenuItem name="fangKeMgr">
                        <Icon type="ios-people" />
                        <span @click="jumpPage('','/')">访客管理</span>
                    </MenuItem>
                    <Submenu name="adminInfo">
                        <template slot="title">
                            <Icon type="ios-state" />
                            管理员：{{curUserName}}
                        </template>
                        <MenuGroup title="头像">
                            <MenuItem name="headPrev">
                                <img @error="imgError()" :src="baseUrl + head" style="width:128px;height:128px;">
                            </MenuItem>
                        </MenuGroup>
                        <MenuGroup title="操作">
                            <MenuItem name="changePwd">
                                <span @click="modifyPassWord()">修改密码</span>
                            </MenuItem>
                            <MenuItem name="logout">
                                <span @click="logout()">注销登录</span>
                            </MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
                <Breadcrumb style="margin-bottom: 15px; margin-top:15px;">
                    <BreadcrumbItem to="#">应用中心</BreadcrumbItem>
                    <BreadcrumbItem :to="$route.path">{{$route.name}}</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <router-view></router-view>
                </Card>
            </Content>
        </Layout>
        <!--修改密码弹出层-->
        <Modal v-model="modal1" :title="'修改密码'" @on-ok="comfirmModifyPS()" @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="width: 100%">
                <Form-item label="用户名" prop="">
                    <Input :value="curUserName" disabled />
                </Form-item>
                <Form-item label="原密码" prop="oldPwd">
                    <Input v-model="formValidate.oldPwd" type="password" placeholder="请输入原始密码" />
                </Form-item>
                <Form-item label="新密码" prop="newPwd">
                    <Input v-model="formValidate.newPwd" type="password" placeholder="请输入新密码" />
                </Form-item>
                <Form-item label="再次输入新密码" prop="">
                    <Input type="password" placeholder="请输入再次输入新密码" />
                </Form-item>
            </Form>
        </Modal>
    </div>
    <!-- 修改密码 模态框 -->

    <!-- 修改密码 模态框 -->
</template>

<script>

    import apiUtil from '../assets/utils/api_util';
    import baseUtil from '../assets/utils/base-util';

    export default {
        data() {
            return {
                errorUserPhoto: require('../assets/image/title_icon_daiban.png'),
                // openNames: [this.$route.matched[0].name],
                openNames: [this.$route.matched[0].name],
                // curUserName: sessionStorage.getItem('user').replace(/\"/g, ""),
                curUserName: "",
                modeType: "vertical",
                spanLeft: 4,
                spanRight: 20,
                logoIsDisplay: false,
                loading: true,
                modal1: false,
                formValidate: {
                    oldPwd: '',
                    newPwd: '',
                },
                ruleValidate: {
                    oldPwd: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                },
                baseUrl: apiUtil.urls.baseUrl,
                head: '',
                //菜单
                menuArr: [],
                //浏览器可用高度
                availHeight: '',
            }
        },
        created() {

            let arr = sessionStorage.getItem('menu');

            this.menuArr = JSON.parse(arr);
            this.menuArr.forEach(function (item, i) {
                item.children.forEach(function (item2, j) {
                    // console.log(item2)
                    if (item2.checked) {
                        item.checked = true;
                    } else {
                        item.checked = false;
                    }
                })
            });
            this.openNames = this.menuArr[0].title;


            console.log('menuArr:', JSON.parse(this.menuArr));

            this.availHeight = window.screen.availHeight;






        },
        computed: {
            iconSize() {
                return this.spanLeft === 4 ? 13 : 23;
            },
            logoSize() {
                if (this.spanLeft !== 4) {
                    this.logoIsDisplay = true;
                    return 50;
                } else {
                    this.logoIsDisplay = false;
                    return 0;
                }
            }
        },
        methods: {
            //右边菜单栏
            getMenuList: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMenu, para, function (res) {
                    that.$Loading.finish();
                    that.menuArr = res.Msg;
                });
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                console.log('点击了');

                this.$router.push(route);
            },
            toggleClick() {
                if (this.spanLeft === 4) {
                    this.spanLeft = 1;
                    this.spanRight = 23;
                } else {
                    this.spanLeft = 4;
                    this.spanRight = 20;
                }
            },
            modifyPassWord() {
                this.modal1 = true;
            },
            logout() {
                this.$router.push('/login');
            },
            handleSubmit(name) {
                // let that = this;
                // let model = this.$refs[name].model;
                // this.$refs[name].validate((valid) => {
                // that.comfirmModifyPS(model);
                // // })
            },
            comfirmModifyPS() {
                let that = this;

                this.$Loading.start();
                that.formValidate.id = baseUtil.getCookie('userId');
                that.formValidate.loginAccount = baseUtil.getCookie('personalname');

                let params = that.$qs.stringify(that.formValidate);

                console.log('params:', params)
                apiUtil.post(that, apiUtil.urls.ChangePassword, params, function (res) {
                    that.$Loading.finish();
                    that.$Modal.confirm({
                        title: '提示',
                        content: '密码修改成功,请重新登录',
                        closable: false,
                        cancelText: ' ',
                        onOk: () => {
                            that.$router.push('/login');
                        },
                        onCancel: () => {
                            that.$router.push('/login');
                        }
                    });
                });

            },
            cancel() {
                this.modal1 = false;
            },
            menuSelect(name) {
                this.$router.push({path: name});

                console.log(this.$router.push({path: name}))
            },
            dropDown(name) {
                this.$router.push({path: name});
                console.log(name);
            },
            imgError(item) {
                // item.img = ;
                this.baseUrl = '';
                this.head = require('../assets/image/moren.jpg');
            }

        },
        mounted() {
            this.curUserName = baseUtil.getSessionStorage('personalname');
            this.head = baseUtil.getSessionStorage('headimgurl');
        }
    }
</script>
